<template>
  <div>
    <div class="tool-container">
      <h4 class="title">基础要素</h4>
      <div class="tool-box">
        <div :data-name="'文字'" class="tool-item" @click="() => addText()" :draggable="true" @dragend="onDragend('text')">
          <svg t="1650875455324" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="5401" width="26" height="26">
            <path
              d="M213.333333 209.92v128h85.333334v-42.666667h170.666666v433.493334H384.853333v85.333333h256v-85.333333H554.666667V295.253333h170.666666v42.666667h85.333334v-128H213.333333z"
              p-id="5402"></path>
          </svg>
        </div>
        <div :data-name="'容器文字'" class="tool-item" @click="() => addTextBox()" :draggable="true"
          @dragend="onDragend('textBox')">
          <svg t="1650854954008" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="14038" width="26" height="26">
            <path
              d="M720.832 692.352h-12.64L530.208 260.448a19.968 19.968 0 0 0-36.416 0L316.608 692.352h-13.44c-7.904 0-15.04 3.968-17.408 11.072a19.872 19.872 0 0 0 18.208 27.68h56.96c9.504 0 18.208-6.336 19.776-15.808a18.752 18.752 0 0 0-15.808-21.344l36.384-87.808h159.776l34.816 87.808a18.88 18.88 0 0 0-15.808 21.344c1.568 9.504 10.272 15.808 19.776 15.808h121.024c7.904 0 15.04-3.968 17.408-11.072a19.2 19.2 0 0 0-17.408-27.68z m-306.112-125.76l64.864-158.208 64.864 158.208H414.72z m-246.816-80.704c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m0-75.936c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m0 151.872c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m11.872-216.736a12.16 12.16 0 0 0 11.872-11.872v-23.744c-0.8-6.336-5.536-11.072-11.872-11.072s-11.872 5.536-11.872 11.872v23.744c0 6.336 4.736 11.072 11.872 11.072z m-11.872 292.672c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m0 75.936c0 7.104 4.736 11.872 11.872 11.872a12.16 12.16 0 0 0 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m665.248-227.808c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m0-75.936c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m0 151.872c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m11.072-216.736a12.16 12.16 0 0 0 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744c0.8 7.104 5.536 11.872 11.872 11.872z m-11.072 292.672c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m0 75.936c0 6.336 5.536 11.872 11.872 11.872s11.872-5.536 11.872-11.872v-23.744c0-6.336-5.536-11.872-11.872-11.872s-11.872 5.536-11.872 11.872v23.744z m-347.264 119.456h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872z m-75.936 0h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872z m151.872 0h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872z m-228.608 0h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872h23.744c6.336 0 11.872-5.536 11.872-11.872s-4.736-11.872-11.872-11.872z m-75.136-7.904H222.496v-11.072a12.48 12.48 0 0 0-12.672-12.64h-18.976v-37.984c0-7.104-5.536-12.64-11.872-12.64s-11.872 5.536-11.872 12.64v37.984h-10.272a12.512 12.512 0 0 0-12.672 12.64v52.992a12.48 12.48 0 0 0 12.672 12.64h52.992a12.512 12.512 0 0 0 12.672-12.64v-11.072h35.584c7.104-1.568 12.672-7.904 12.672-14.24 0-7.104-12.672-16.608-12.672-16.608z m379.68 7.904h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872z m75.936 0h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872h23.744c6.336 0 11.872-5.536 11.872-11.872s-4.736-11.872-11.872-11.872z m-251.52-642.304h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872z m-75.936 0h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872z m151.872 0h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872z m-227.808 0h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872h-23.744c-7.104 0.8-11.872 5.536-11.872 12.672s4.736 11.072 11.872 11.072zM257.28 167.904H221.696v-11.072a12.512 12.512 0 0 0-12.672-12.672H156.832a12.512 12.512 0 0 0-12.672 12.672v52.992c0 7.104 5.536 12.672 12.672 12.672h11.072v35.584c1.568 7.104 7.904 12.672 14.24 12.672s16.608-12.672 16.608-12.672V222.496h11.072a12.512 12.512 0 0 0 12.672-12.672v-18.976h35.584a12.16 12.16 0 0 0 11.872-11.872 12.224 12.224 0 0 0-12.672-11.072z m356.768 22.944h23.744c6.336 0 11.872-5.536 11.872-11.872s-5.536-11.872-11.872-11.872h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872z m76.736 0h23.744c6.336 0 11.072-4.736 11.072-11.072s-5.536-11.872-11.872-11.872h-23.744c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.072 12.64 11.072z m176.384-46.656h-52.992a12.48 12.48 0 0 0-12.64 12.672v11.072h-35.584c-7.104 1.568-12.64 7.904-12.64 14.24s12.64 16.608 12.64 16.608h35.584v11.072c0 7.104 5.536 12.672 12.64 12.672h18.976v37.984c0 7.104 5.536 12.672 11.872 12.672s11.872-5.536 11.872-12.672V222.528h11.072a12.48 12.48 0 0 0 12.64-12.672V156.864a13.76 13.76 0 0 0-13.44-12.672z m0 657.312h-11.072v-35.584c-1.568-7.104-7.904-12.64-14.24-12.64-7.104 0-16.608 12.64-16.608 12.64v35.584h-11.072a12.48 12.48 0 0 0-12.64 12.64v18.976h-35.584c-6.336 0-11.872 5.536-11.872 11.872s5.536 11.872 11.872 11.872h35.584v11.072a12.48 12.48 0 0 0 12.64 12.64h52.992a12.48 12.48 0 0 0 12.64-12.64v-52.992c0-7.904-5.536-13.44-12.64-13.44z"
              p-id="14039"></path>
          </svg>
        </div>
        <div :data-name="'方形'" class="tool-item" @click="() => addRect()" :draggable="true" @dragend="onDragend('rect')">
          <svg t="1650855811131" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="18499" width="26" height="26">
            <path
              d="M864 896H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h704a32 32 0 0 1 32 32v704a32 32 0 0 1-32 32zM192 832h640V192H192v640z"
              p-id="18500"></path>
          </svg>
        </div>
        <div :data-name="'圆形'" class="tool-item" @click="() => addCircle()" :draggable="true"
          @dragend="onDragend('circle')">
          <svg t="1650855860236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="19440" width="26" height="26">
            <path
              d="M512 928C282.624 928 96 741.376 96 512S282.624 96 512 96s416 186.624 416 416-186.624 416-416 416z m0-768C317.92 160 160 317.92 160 512s157.92 352 352 352 352-157.92 352-352S706.08 160 512 160z"
              p-id="19441"></path>
          </svg>
        </div>
        <div :data-name="'三角形'" class="tool-item" @click="() => addTriangle()" :draggable="true"
          @dragend="onDragend('triangle')">
          <svg t="1650874633978" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2032" width="26" height="26">
            <path
              d="M928.64 896a2.144 2.144 0 0 1-0.64 0H96a32.032 32.032 0 0 1-27.552-48.288l416-704c11.488-19.456 43.552-19.456 55.104 0l413.152 699.2A31.936 31.936 0 0 1 928.64 896zM152.064 832h719.84L512 222.912 152.064 832z"
              p-id="2033"></path>
          </svg>
        </div>
        <!-- 多边形按钮 -->
        <div :data-name="'多边形按钮'" class="tool-item" @click="() => addPolygon()" :draggable="true"
          @dragend="onDragend('polygon')">
          <svg t="1650874633978" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2032" width="26" height="26">
            <path
              d="M161.152 398.016l134.016 412.416h433.664l134.016-412.416L512 143.104 161.152 398.08zM512 64l426.048 309.568-162.752 500.864H248.704L85.952 373.568 512 64z"
              p-id="2033"></path>
          </svg>
        </div>
      </div>
    </div>
    <div class="tool-container">
      <h4 class="title">绘制元素</h4>
      <div class="tool-box">
        <div :data-name="'线段'" class="tool-item" @click="drawingLineModeSwitch(false)"
          :class="isDrawingLineMode && !isArrow && 'bg'">
          <svg t="1683135774637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="30938" width="26" height="26">
            <path
              d="M848 432a80.064 80.064 0 0 0-73.216 48H217.216A80.096 80.096 0 0 0 144 432 80.096 80.096 0 0 0 64 512c0 44.128 35.904 80 80 80A80 80 0 0 0 217.216 544h557.536a80 80 0 0 0 73.216 48c44.128 0 80-35.872 80-80a80.032 80.032 0 0 0-79.968-80z"
              p-id="30939"></path>
          </svg>
        </div>
        <div :data-name="'箭头'" class="tool-item" @click="drawingLineModeSwitch(true)"
          :class="isDrawingLineMode && isArrow && 'bg'">
          <svg t="1683135836915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="33537" width="26" height="26">
            <path
              d="M779.8 240.9l225.9 225.9c25 25 25 65.5 0 90.5L779.8 783.1c-1.6 1.6-4.1 1.6-5.7 0l-62.2-62.2c-1.6-1.6-1.6-4.1 0-5.7l148.4-148.4c2.5-2.5 0.7-6.8-2.8-6.8H4c-2.2 0-4-1.8-4-4v-88c0-2.2 1.8-4 4-4h853.5c3.6 0 5.3-4.3 2.8-6.8L711.9 308.8c-1.6-1.6-1.6-4.1 0-5.7l62.2-62.2c1.6-1.6 4.1-1.6 5.7 0z"
              p-id="33538"></path>
          </svg>
        </div>

        <div :data-name="'图片'" class="tool-item" @click="insertImg">
          <svg t="1683135530626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="18906" width="26" height="26">
            <path
              d="M973.609745 750.236863 853.432379 750.236863 853.432379 630.039569c0-26.709513-20.033381-46.743891-46.743891-46.743891s-46.743891 20.034377-46.743891 46.743891l0 126.87542L626.391052 756.914989c-26.709513 0-46.743891 20.033381-46.743891 46.743891s20.033381 46.743891 46.743891 46.743891l126.87542 0 0 126.855492c0 26.709513 20.033381 46.743891 46.743891 46.743891 26.709513 0 46.743891-20.034377 46.743891-46.743891L846.754254 850.40277 973.609745 850.40277c26.711506 0 46.743891-20.032384 46.743891-46.743891C1027.031761 776.949366 1000.322248 750.236863 973.609745 750.236863L973.609745 750.236863 973.609745 750.236863zM505.222231 871.609954 505.222231 871.609954 87.137882 871.609954c-15.500585 0-27.135989-11.634407-27.135989-27.175846l0-759.112174c0-15.511546 11.635403-27.145953 27.135989-27.145953l740.858431 0c15.47966 0 27.11606 11.635403 27.11606 27.145953l0 410.313131 0 0 0 0c0 15.500585 11.656329 27.136985 27.176843 27.136985 15.499589 0 27.135989-11.6364 27.135989-27.136985l0 0 0 0L909.425205 58.176977c0-31.031064-27.135989-58.178014-58.177017-58.178014L60.000897-0.001036C28.979797-0.001036 1.82388 27.145913 1.82388 58.176977l0 813.432977c0 31.001171 27.155918 58.157088 58.177017 58.157088l445.221334 0 0 0c15.499589 0 27.135989-11.656329 27.135989-27.155918C532.356226 883.224433 520.720823 871.609954 505.222231 871.609954L505.222231 871.609954 505.222231 871.609954zM499.513639 736.881608c20.033381-40.065765 66.777271-66.777271 113.521162-66.777271l53.42102 0 0-60.098149c0-53.422016 33.389632-100.165907 80.132526-120.198291l0 0 0 0-66.776275-200.319857-233.718457 300.485763-66.777271-106.843036L132.261565 736.881608 499.513639 736.881608 499.513639 736.881608 499.513639 736.881608zM379.316344 309.51046c0-40.054804-33.388636-73.444436-73.453404-73.444436s-73.454401 33.389632-73.454401 73.444436c0 40.066761 33.388636 73.454401 73.454401 73.454401S379.316344 349.577221 379.316344 309.51046L379.316344 309.51046 379.316344 309.51046z"
              fill="#272636" p-id="18907"></path>
          </svg>
        </div>

        <div :data-name="'svg'" class="tool-item" @click="insertSvg">
          <svg t="1683135686740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="20245" width="26" height="26">
            <path
              d="M354.40128 0c-87.04 0-157.44 70.55872-157.44 157.59872v275.68128H78.72c-21.6576 0-39.36256 17.69984-39.36256 39.36256v236.31872c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.24128v118.08256c0 87.04 70.4 157.59872 157.44 157.59872h472.63744c87.04 0 157.59872-70.55872 157.59872-157.59872V315.0336c0-41.74848-38.9888-81.93024-107.52-149.27872l-29.11744-29.12256L818.87744 107.52C751.5392 38.9888 711.39328 0 669.59872 0H354.4064z m0 78.72h287.20128c28.35456 7.0912 27.99616 42.1376 27.99616 76.8v120.16128c0 21.6576 17.69984 39.35744 39.36256 39.35744h118.07744c39.38816 0 78.87872-0.0256 78.87872 39.36256v512c0 43.32032-35.55328 78.87872-78.87872 78.87872H354.4064c-43.32544 0-78.72-35.5584-78.72-78.87872v-118.08256h393.91744c21.66272 0 39.36256-17.69472 39.36256-39.35744V472.64256c0-21.66272-17.69984-39.36256-39.36256-39.36256H275.68128V157.59872c0-43.32032 35.39456-78.87872 78.72-78.87872z m-115.2 426.72128c17.28 0 32.64 3.2 46.08 9.6l-7.68 18.23744c-13.44-5.76-26.24-8.63744-38.4-8.63744-10.24 0-17.92 2.23744-23.04 6.71744s-7.68 10.56256-7.68 18.24256c0 8.96 1.92 15.67744 5.76 20.15744 4.48 3.84 15.03744 9.6 31.67744 17.28 17.28 7.04 28.48256 14.40256 33.60256 22.08256 5.76 7.04 8.63744 16 8.63744 26.88 0 14.72-5.12 26.55744-15.36 35.51744s-24.96 13.44-44.16 13.44c-18.56 0-33.28-2.56-44.16-7.68v-21.12c15.36 6.4 30.08 9.6 44.16 9.6 12.8 0 22.08256-2.23744 27.84256-6.71744 6.4-4.48 9.6-11.52 9.6-21.12 0-7.68-2.24256-14.08-6.72256-19.2-3.2-3.2-15.03744-9.28256-35.51744-18.24256-13.44-6.4-23.04-13.44-28.8-21.12s-8.64256-17.59744-8.64256-29.75744c0-13.44 4.48-24.00256 13.44-31.68256 9.6-8.32 22.72256-12.47744 39.36256-12.47744z m295.68 0c17.92 0 33.92 3.2 48 9.6l-8.64256 20.15744c-14.08-7.04-27.83744-10.55744-41.27744-10.55744-18.56 0-33.28 6.07744-44.16 18.23744s-16.32256 29.76256-16.32256 52.80256c0 23.04 4.80256 40.63744 14.40256 52.79744 10.24 11.52 25.6 17.28 46.08 17.28 9.6 0 19.84-1.28 30.72-3.84v-51.84h-35.52256v-20.15744h57.6v86.4c-17.92 5.76-37.43744 8.63744-58.55744 8.63744-23.68 0-42.56256-7.68-56.64256-23.04s-21.12-37.76-21.12-67.2c0-28.16 7.36256-49.92 22.08256-65.28 15.36-16 36.48-23.99744 63.36-23.99744z m-235.20256 1.92h24.00256l35.51744 111.36c3.2 10.88 6.72256 24.32 10.56256 40.32 1.92-11.52 5.43744-25.28256 10.55744-41.28256l35.52256-110.39744h23.04L380.3136 683.03872H358.2464L299.6736 507.36128z"
              p-id="20246"></path>
          </svg>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuid } from 'uuid';
import initializeLineDrawing from '../core/initializeLineDrawing';
import { getPolygonVertices } from '../utils/math';
import { getImgStr, selectFiles } from '../utils/utils';
import select from '../mixins/select';

// 默认属性
const defaultPosition = {
  shadow: '', fontFamily: 'arial',
  originX: 'left',
  originY: 'top',
};
// 拖拽属性
const dragOption = {
  left: 0,
  top: 0,
};
export default {
  name: 'ToolBar',
  inject: ['canvas', 'fabric'],
  mixins: [select],
  data() {
    return {
      isDrawingLineMode: false,
      isArrow: false,
    };
  },
  created() {
    // 线条绘制
    this.drawHandler = initializeLineDrawing(this.canvas.c, defaultPosition);

    this.canvas.c.on('drop', (opt) => {
      // 画布元素距离浏览器左侧和顶部的距离
      const offset = {
        left: this.canvas.c.getSelectionElement().getBoundingClientRect().left,
        top: this.canvas.c.getSelectionElement().getBoundingClientRect().top,
      };

      // 鼠标坐标转换成画布的坐标（未经过缩放和平移的坐标）
      const point = {
        x: opt.e.x - offset.left,
        y: opt.e.y - offset.top,
      };

      // 转换后的坐标，restorePointerVpt 不受视窗变换的影响
      const pointerVpt = this.canvas.c.restorePointerVpt(point);
      dragOption.left = pointerVpt.x;
      dragOption.top = pointerVpt.y;
    });
  },
  methods: {
    // 拖拽开始时就记录当前打算创建的元素类型
    onDragend(type) {
      // todo 拖拽优化 this.canvas.editor.dragAddItem(event, item);
      switch (type) {
        case 'text':
          this.addText(dragOption);
          break;
        case 'textBox':
          this.addTextBox(dragOption);
          break;
        case 'rect':
          this.addRect(dragOption);
          break;
        case 'circle':
          this.addCircle(dragOption);
          break;
        case 'triangle':
          this.addTriangle(dragOption);
          break;
        case 'polygon':
          this.addPolygon(dragOption);
          break;
        default:
      }
    },
    addText(option) {
      const text = new this.fabric.IText('万事大吉', {
        ...defaultPosition,
        ...option,
        fontSize: 80,
        id: uuid(),
      });
      this.canvas.c.add(text);
      // if (!option) {
      //   text.center();
      // }
      this.canvas.c.setActiveObject(text);
    },
    addImg(e) {
      const imgEl = e.target.cloneNode(true);
      const imgInstance = new this.fabric.Image(imgEl, {
        ...defaultPosition,
        id: uuid(),
        name: '图片default',
      });
      this.canvas.c.add(imgInstance);
      this.canvas.c.renderAll();
    },
    addTextBox(option) {
      const text = new this.fabric.Textbox('诸事顺遂', {
        ...defaultPosition,
        ...option,
        splitByGrapheme: true,
        width: 400,
        fontSize: 80,
        id: uuid(),
      });
      this.canvas.c.add(text);
      // if (!option) {
      //   text.center();
      // }
      this.canvas.c.setActiveObject(text);
    },
    addTriangle(option) {
      const triangle = new this.fabric.Triangle({
        ...defaultPosition,
        width: 400,
        height: 400,
        fill: '#92706B',
        id: uuid(),
        name: '三角形',
      });
      this.canvas.c.add(triangle);
      // if (!option) {
      //   triangle.center();
      // }
      this.canvas.c.setActiveObject(triangle);
    },
    addPolygon(option) {
      const polygon = new this.fabric.Polygon(getPolygonVertices(5, 200), {
        ...defaultPosition,
        ...option,
        fill: '#ccc',
        id: uuid(),
        name: '多边形',
      });
      polygon.set({
        // 创建完设置宽高，不然宽高会变成自动的值
        width: 400,
        height: 400,
        // 关闭偏移
        pathOffset: {
          x: 0,
          y: 0,
        },
      });
      this.canvas.c.add(polygon);
      // if (!option) {
      //   polygon.center();
      // }
      this.canvas.c.setActiveObject(polygon);
    },
    addCircle(option) {
      const circle = new this.fabric.Circle({
        ...defaultPosition,
        ...option,
        radius: 150,
        fill: '#57606B',
        id: uuid(),
        name: '圆形',
      });
      this.canvas.c.add(circle);
      // if (!option) {
      //   circle.center();
      // }
      this.canvas.c.setActiveObject(circle);
    },
    addRect(option) {
      const rect = new this.fabric.Rect({
        ...defaultPosition,
        ...option,
        fill: '#F57274',
        width: 400,
        height: 400,
        id: uuid(),
        name: '矩形',
      });
      this.canvas.c.add(rect);
      // if (!option) {
      //   rect.center();
      // }
      this.canvas.c.setActiveObject(rect);
    },
    drawingLineModeSwitch(isArrow) {
      this.isArrow = isArrow;
      this.isDrawingLineMode = !this.isDrawingLineMode;
      this.drawHandler.setMode(this.isDrawingLineMode);
      this.drawHandler.setArrow(isArrow);
      this.canvas.c.forEachObject((obj) => {
        if (obj.id !== 'workspace') {
          obj.selectable = !this.isDrawingLineMode;
          obj.evented = !this.isDrawingLineMode;
        }
      });
    },
    insertImg() {
      selectFiles({ accept: 'image/*', multiple: true }).then((fileList) => {
        Array.from(fileList).forEach((item) => {
          getImgStr(item).then((file) => {
            this.insertImgFile(file);
          });
        });
      });
    },
    insertSvg() {
      selectFiles({ accept: '.svg', multiple: true }).then((fileList) => {
        Array.from(fileList).forEach((item) => {
          getImgStr(item).then((file) => {
            this.insertSvgFile(file);
          });
        });
      });
    },
    // 插入图片文件
    insertImgFile(file) {
      const imgEl = document.createElement('img');
      imgEl.src = file || this.imgFile;
      // 插入页面
      document.body.appendChild(imgEl);
      imgEl.onload = () => {
        // 创建图片对象
        const imgInstance = new this.fabric.Image(imgEl, {
          ...defaultPosition,
          id: uuid(),
          name: '图片1',
          // left: 100,
          // top: 100,
        });
        // 设置缩放
        this.canvas.c.add(imgInstance);
        this.canvas.c.setActiveObject(imgInstance);
        this.canvas.c.renderAll();
        // 删除页面中的图片元素
        imgEl.remove();
      };
    },
  },
};
</script>

<style scoped lang="scss">
</style>
